<template>
  <div class="myInfo">
    <hmNavBar path="/home/my" title="我的资料"></hmNavBar>
    <div class="content">
      <myCell
        title="头像"
        type="img"
        :value="userInfo.avatar"
        @click.native="goEdit('avatar')"
      ></myCell>
      <div class="other">
        <myCell
          title="昵称"
          :value="userInfo.nickname"
          @click.native="goEdit('nickname')"
        ></myCell>
        <!-- {
          0:"未知",
          1:"男",
          2:"女"
          } -->
        <!-- 在组件上使用原生事件 @click.native就可以使用原生事件了
        el-input  @keyup.enter.native
         -->
        <myCell
          title="性别"
          :value="genderObj[userInfo.gender]"
          @click.native="showGender = true"
        ></myCell>
        <myCell
          title="地区"
          :value="areaData.city_list[userInfo.area]"
          @click.native="showCity = true"
        ></myCell>
        <!-- 路由传参
        传:this.$router.push("path?参数名=值")
          this.$router.push({
            path:"地址",
            query:{
              参数名:值
            }
          })
          params传参在url不会休现,刷新页面就取不到了
          this.$router.push({
            path:"地址",
            params:{
              参数名:值
            }
          })
        收:this.$route.query.参数名
         -->
        <myCell
          title="个人简介"
          :value="userInfo.intro"
          @click.native="goEdit('intro')"
        ></myCell>
        <van-button block color="#fff" class="btn" @click="exit">
          <span class="red">退出登录</span>
        </van-button>
      </div>
      <!-- 性别选择弹框 
    van-popup
        v-model:是否显示
        position:位置  
    van-picker
        title:标题
        show-toolbar:是否显示工具拦
        columns="数组数据"
        default-index:默认选中某项的索引
        @cancel="取消点击事件"
        @confirm="确定点击事件(value,index)=>{value选中项的值 index:选中项的索引}"
    
    -->
      <van-popup v-model="showGender" position="bottom">
        <van-picker
          title="性别选择"
          show-toolbar
          :default-index="userInfo.gender"
          :columns="Object.values(genderObj)"
          @cancel="showGender = false"
          @confirm="genderConfirm"
        >
        </van-picker>
      </van-popup>
      <!--地区 -->
      <!-- van-area
           title="标题"
           area-list:城市数据
           columns-num:3:省市区 2:省市 1:省
           value:默认选中城市的code
           @confirm="(value,index)=>{value选中的值,index选中的索引}"
           @cancel="取消"      
       -->
      <van-popup v-model="showCity" position="bottom">
        <!-- 城市选择弹框 -->
        <van-area
          title="城市选择"
          :area-list="areaData"
          colums-num="2"
          :value="userInfo.area"
          @cancel="showCity = false"
          @confirm="cityConfirm"
        ></van-area>
      </van-popup>
    </div>
  </div>
</template>
<script>
import myCell from './myCell'
import { mapState } from 'vuex'
import { removeLocal } from '@/utils/local.js'
import { auEdit } from '@/api/my.js'
// 导入area
import area from '@/assets/js/area.js'
export default {
  components: {
    myCell
  },
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      genderObj: {
        0: '未知',
        1: '男',
        2: '女'
      },
      showGender: false, //性别弹框
      showCity: false, //城市弹框
      areaData: area
    }
  },
  methods: {
    exit () {
      /*      
      this.$dialog.confirm({
        title:标题,
        message:"内容"
      }).then(()=>{
        //确定处理
      }).catch(()=>{
        //取消处理
      })      
      */
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '您确定要退出吗？'
        })
        .then(() => {
          //确定处理
          // 1:清除token
          removeLocal('token')
          // 修改isLogin=false
          // this.$store.state.isLogin
          // 设置登录状态码为false
          this.$store.commit('setLoginState', false)
          // 3跳转到登陆
          this.$router.push('../login')
        })
        .catch(() => {
          //取消处理
        })
    },
    //性别选择确定
    genderConfirm (value, index) {
      // window.console.log(value, index) //女 2
      this.showGender = false
      this.editInfo('gender', index)
    },
    // 城市选择确定
    cityConfirm (value, index) {
      // window.console.log(value, index)
      this.showCity = false
      this.editInfo('area', value[1].code)
    },
    // 编辑用户信息
    editInfo (key, value) {
      // 对象内的Key希望是变量{[变量名]:值}
      auEdit({
        // gender: value
        [key]: value
      }).then(() => {
        // 提示一下
        this.$toast.success('修改资料成功')
        // 刷新用户信息
        this.$store.dispatch('getUserInfo')
      })
    },
    // 修改昵称 跳转路由到相应页面
    goEdit (str) {
      this.$router.push('/home/editInfo?type=' + str)
    }
  }
}
</script>
<style lang="less" scoped>
.myInfo {
  height: 100%;
  background-color: #f7f4f5;
  .content {
    padding: 18px @p15;
    .other {
      padding-top: 10px;
    }
    .btn {
      margin-top: 10px;
      .red {
        color: red;
      }
    }
  }
}
</style>
